<template>
  <div>
    <div
      class="product-window cut_price group-con"
      :class="attr.cartAttr === true ? 'on' : ''"
      :style="'padding-bottom:' + (isShowBtn ? '0' : '')"
    >
      <div class="textpic acea-row row-between-wrapper">
        <div class="pictrue">
          <img :src="attr.productSelect.image" class="image" />
        </div>
        <div class="text">
          <div class="money font-color-red">
            ￥<span style="font-size:0.4rem;font-weight: 600;">
              {{ attr.productSelect.price }}
            </span>
            
          </div>
          <div class="selected">
            <span>已选：</span>
            <span>{{selectedName[0]}}{{selectedName.length > 1 ? `/${selectedName[1]}` : ''}}</span>
          </div>
        </div>
      </div>
      <div class="productWinList">
        <div
          class="item"
          v-for="(item, indexw) in attr.productAttr"
          :key="indexw"
        >
          <div class="title">{{ item.attr_name }}</div>
          <div class="listn acea-row row-middle">
            <div
              class="itemn"
              :class="item.index === itemn.attr ? 'active' : ''"
              v-for="(itemn, indexn) in item.attr_value"
              @click="tapAttr(indexw, itemn.attr)"
              :key="indexn"
            >
              {{ itemn.attr }}
            </div>
          </div>
        </div>
      </div>
      <div class="bottomDiv" @click="sureSelect">
        确认
        <!-- <span
          class="addToCard"
          @click="goCat(0)"
          v-show="attr.productSelect.stock > 0"
          >添加至购物车</span
        >
        <span class="buy" @click="tapBuy1" v-show="attr.productSelect.stock > 0"
          >立即购买</span
        >
        <div
          class="noshop"
          style="width: 100%;text-align:center;line-height:1rem;height: 100%;background: rgba(0, 0, 0, 0.2);color: #fff;border-radius: 0.08rem;"
          v-show="attr.productSelect.stock == 0"
        >
          当前无货
        </div> -->
      </div>
      <!-- <div class="wrapper" v-if="isShowBtn">
        <div
          class="teamBnt bg-color-red"
          @click="openAlone"
          v-if="
            attr.productSelect.quota > 0 && attr.productSelect.product_stock > 0
          "
        >
          立即参团
        </div>
        <div class="teamBnt bg-color-hui" v-else>已售罄</div>
      </div> -->
    </div>
    <div
      class="mask"
      @touchmove.prevent
      :hidden="attr.cartAttr === false"
      @click="closeAttr"
    ></div>
  </div>
</template>
<script>
export default {
  name: "ProductWindow",
  props: {
    attr: {
      type: Object,
      default: () => {}
    },
    is_limit_buy:{
      type:String
    },
    attrValue:{
      default:'',
      type:String
    }
  },
  data: function() {
    return {
      unit_name: "",
      selectedName:[]
    };
  },
  computed: {
    isShow() {
      return this.$route.path.indexOf("detail") === 1;
    },
    isShowBtn() {
      return this.$route.path.indexOf("group_rule") != -1;
    }
  },
  watch:{
    attr:{
      deep:true,
      handler(value){
        this.selectedName = value.productAttr.map(item => item.index)
      }
    }
  },
  mounted: function() {
    // console.log(this.attr.productAttr,'sttr')
    // this.selectedName = this.attr.productAttr.map(item => item.index)
    // console.log(this.selectedName,'sssss');
    this.unit_name = this.attr.storeInfo.unit_name;
  },
  methods: {
    //立即购买
    tapBuy1: function(news) {
      this.$parent.tapBuy(0);
    },
    openAlone() {
      this.$emit("changeFun", { action: "goPay", value: false });
    },
    sureSelect(){
      console.log(this.attrValue)
      if(!this.attrValue){
        return this.$dialog.toast({mes:'请选择商品规格'})
      }
      this.$emit("changeFun", { action: "changeattr", value: false });
      this.$emit("changeFun", { action: "editAddress", value: true });
    },
    closeAttr(type = false) {
      this.$emit("changeFun", { action: "changeattr", value: false });
    },
    // CartNumDes: function() {
    //   this.$emit("changeFun", { action: "ChangeCartNum", value: false });
    // },
    // CartNumAdd: function() {
    //   this.$emit("changeFun", { action: "ChangeCartNum", value: 1 });
    // },
    tapAttr(indexw, indexn) {
      let that = this;
      this.unit_name = that.attr.productAttr[indexw].attr_name;
      // this.attr.productSelect.store_name = indexn;
      that.attr.productAttr[indexw].index = indexn;
      let value = that
        .getCheckedValue()
        .sort()
        .join(",");
        this.selectedName = value.split(',')
      that.$emit("changeFun", { action: "ChangeAttr", value: value });
    },
    //获取被选中属性；
    getCheckedValue: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        for (let j = 0; j < productAttr[i].attr_value.length; j++) {
          if (productAttr[i].index === productAttr[i].attr_value[j].attr) {
            value.push(productAttr[i].attr_value[j].attr);
          }
        }
      }
      return value;
    }
  }
};
</script>
<style lang="scss" scoped>
.cut_price{
  padding:0 0.4rem 0.8rem;
  box-sizing: border-box;
  .textpic{
    align-items: flex-end;
    padding: 0;
    .text{
      .money{
        color:#FC404A;
      }
      .selected{
        margin-top: 0.08rem;
        font-size: 0.24rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
  .productWinList{
    .item{
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0.18rem 0 0.4rem 0;
      box-sizing: border-box;
      .title{
        padding: 0;
      }
      .listn{
        padding: 0;
      }
      .itemn{
        padding: 0.12rem 0.24rem;
        box-sizing: border-box;
        
        border-radius: 0.06rem;
        
        margin-right: .12rem;
        border:none;
        background: #F3F3F3;
        font-size: 0.24rem;
        color: rgba(0, 0, 0, 0.6);
      }
      .active{
        background: #FFF0F0;
        color:#FC404A;
      }
    }
  }
  .bottomDiv{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    background: #FC404A;
    border-radius: 0.08rem;
    font-size: 0.3rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    height: 0.84rem;
  }
}
.joinCart {
  width: 80%;
  height: 0.76rem;
  line-height: 0.76rem;
  text-align: center;
}
.ipt_num {
  width: 100%;
  display: block;
  line-height: 0.6rem;
  text-align: center;
}
</style>
